<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css">
    <script src='./Math.js'></script>
    <script src='./jackpotConfig.js?s=2'></script>
    <script src='./config.js?s=2'></script>
    <script src='./app.js'></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>Document</title>
</head>



<body>
    <div id="app" class="app">
        <el-tag>累计抽奖次数: {{usePrizeDrawNum}}</el-tag>
        <el-tag style="color: #909399;">白珠数量: {{white}}</el-tag>
        <el-tag style="color: #67C23A;">绿珠数量: {{green}}</el-tag>
        <el-tag style="color: #409EFF;">蓝珠数量: {{blue}}</el-tag>
        <el-tag style="color: violet;">紫珠数量: {{violet}}</el-tag>
        <el-tag style="color: orange;">橙珠数量: {{orange}}</el-tag>
        <br>
        <br>
        <el-button type="primary" @click="run(1)">单抽</el-button>
        <el-button type="primary" @click="run(10)">10连抽</el-button>

        <el-divider></el-divider>

        累计抽到的数据
        <el-table :data="playerLotteryRecord" border style="width: 100%">
            <el-table-column label="礼品珠品级" width="180">
                <template slot-scope="scope">
                    <span
                        :style="{color:(scope.row.grade==0?'#909399':scope.row.grade==1?'#67C23A':scope.row.grade==2?'#409EFF':scope.row.grade==3?'violet':scope.row.grade==4?'orange':'black')}">{{ scope.row == null ? "" : (scope.row.grade == 0 ? "白珠" : scope.row.grade == 1 ? "绿珠" : scope.row.grade == 2 ? "蓝珠" : scope.row.grade == 3 ? "紫珠" : scope.row.grade == 4 ? "橙珠" : "未知") }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="礼品名称">
            </el-table-column>
            <el-table-column prop="num" label="礼品数量" width="180">
            </el-table-column>
            <el-table-column prop="count" label="抽到的次数" width="180">
            </el-table-column>
        </el-table>

        <el-dialog title="抽奖奖品如下" :visible.sync="dialogVisible" width="30%">
            <el-table :data="items" border style="width: 100%">
                <el-table-column label="礼品珠品级" width="180">
                    <template slot-scope="scope">
                        <span
                            :style="{color:(scope.row.grade==0?'#909399':scope.row.grade==1?'#67C23A':scope.row.grade==2?'#409EFF':scope.row.grade==3?'violet':scope.row.grade==4?'orange':'black')}">{{ scope.row == null ? "" : (scope.row.grade == 0 ? "白珠" : scope.row.grade == 1 ? "绿珠" : scope.row.grade == 2 ? "蓝珠" : scope.row.grade == 3 ? "紫珠" : scope.row.grade == 4 ? "橙珠" : "未知") }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="礼品名称">
                </el-table-column>
                <el-table-column prop="num" label="礼品数量" width="180">
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>



</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            usePrizeDrawNum, //已经累计消耗的抽奖券数量
            playerLotteryRecord,//玩家抽奖记录
            dialogVisible: false, //提示信息
            items: [], //当前抽奖的数据
        },
        methods: {
            run: function (count) {
                this.items = run(count);
                this.usePrizeDrawNum = usePrizeDrawNum;
                this.playerLotteryRecord = playerLotteryRecord;
                this.dialogVisible = true;
            },
            atr: function (index) {
                let num = 0;
                for (const i in this.playerLotteryRecord) {
                    let item = this.playerLotteryRecord[i];
                    if (item.grade == index) {
                        num += item.count;
                    }
                }
                return num;
            }

        },
        computed: {
            white: function () {
                return this.atr(0);
            },
            green: function () {
                return this.atr(1);
            },
            blue: function () {
                return this.atr(2);
            },
            violet: function () {
                return this.atr(3);
            },
            orange: function () {
                return this.atr(4);
            }
        }
    })
</script>

</html>